<template>
  <el-row :gutter="10">
    <el-col :span="24">
<!--      <el-card class="layout-query">-->
        <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
          <el-form-item prop="imei">
            <el-input v-model="state.queryForm.key" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-form>
<!--      </el-card>-->

      <el-card>
<!--        <el-space>-->
<!--          <el-space>-->
<!--            <el-button v-auth="'gps:device:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()"-->
<!--            >新增</el-button-->
<!--            >-->
<!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button v-auth="'gps:device:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>-->
          <!--          </el-space>-->
<!--          <el-space>-->
<!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="bulkTransfers()">批量转移</el-button>-->
<!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button  icon="Plus" type="primary" @click="dialog()">过期设备充值</el-button>-->
          <!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button icon="Plus" type="primary" @click="dialog()">SIM充值</el-button>-->
          <!--          </el-space>-->
          <!--          <el-space>-->
          <!--            <el-button v-auth="'biz:car:save'" icon="Plus" type="primary" @click="disposition()" v-if="userStore.user.superAdmin===1">设备年费配置</el-button>-->
          <!--          </el-space>-->
<!--        </el-space>-->
        <el-table
            v-loading="state.dataListLoading"
            :data="state.dataList"
            border
            class="layout-table"
            @selection-change="selectionChangeHandle">
<!--          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
          <el-table-column prop="id" label="商品订单ID" header-align="center" align="center"></el-table-column>
          <ma-dict-column prop="goodsType" label="商品类型" dict-type="goods_type"></ma-dict-column>
          <el-table-column prop="payOrderId" label="流水订单号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" header-align="center" align="center"></el-table-column>
          <el-table-column prop="amount" label="金额" header-align="center" align="center"></el-table-column>
          <el-table-column prop="userId" label="用户ID" header-align="center" align="center"></el-table-column>
          <ma-dict-column prop="status" label="订单状态" dict-type="orders_status"></ma-dict-column>
          <ma-dict-column prop="channelId" label="支付渠道" dict-type=""></ma-dict-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              header-align="center"
              align="center"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" header-align="center" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
            <template #default="scope">
              <el-button v-if="scope.row.status !== 0" type="primary" link @click="refund(scope.row)">退款</el-button>
              <el-button type="primary" link @click="deleteBHandle(scope.row.id)">删除</el-button>
              <!--              <el-button-->
              <!--                  v-auth="'gps:device:delete'"-->
              <!--                  type="primary"-->
              <!--                  link-->
              <!--                  @click="deleteBatchHandle(scope.row.imei)"-->
              <!--              >跟踪</el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="state.page"
            :page-sizes="state.pageSizes"
            :page-size="state.limit"
            :total="state.total"
            layout="total, sizes, prev, pager, next"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle">
        </el-pagination>

        <!-- 弹窗, 新增 / 修改 -->
<!--        <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update>-->

      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, markRaw } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import AddOrTransfer from '@/views/gps/device/add-or-transfer.vue'
import { deleteGrouping, getlistGroupingApi } from '@/api/gps/device'
import AddOrGrouping from '@/views/gps/device/add-or-grouping.vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import OrgTree from '@/views/sys/user/org-tree.vue'
import MaDictColumn from "@/components/ma-dict/ma-dict-column/index.vue";
import {deleteHandleApi, refundApi, useCommoditySubmitApi} from "@/api/gps/orders";
const state: IHooksOptions = reactive({
  dataListUrl: '/gps/pay/goodsOrderList',
  // deleteUrl: '/gps/pay/delete',
  newParams: true,
  queryForm: {
    key: ''
  }
})

function refund(val){
  refundApi({
    goodsOrderId: val.id,
    amount: val.amount,
    remark: '手动退款'
  }).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        getDataList()
      }
    })
  })
}
function deleteBHandle(id){
  deleteHandleApi(id).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        getDataList()
      }
    })
  })
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } =
    useCrud(state)

</script>
